/* eslint-disable */
<template>
  <div class="orders-container">
    <div class="orders-header">
      <h2>我的订单</h2>
      <div class="order-tabs">
        <el-tabs v-model="activeTab" @tab-click="handleTabClick">
          <el-tab-pane label="全部订单" name="all"></el-tab-pane>
          <el-tab-pane label="待支付" name="unpaid"></el-tab-pane>
          <el-tab-pane label="待服务" name="pending"></el-tab-pane>
          <el-tab-pane label="已完成" name="completed"></el-tab-pane>
          <el-tab-pane label="已取消" name="cancelled"></el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- 订单列表 -->
    <div class="orders-list">
      <el-card v-for="order in filteredOrders" :key="order.id" class="order-card">
        <div class="order-header">
          <div class="order-info">
            <span class="order-number">订单号：{{ order.orderNumber }}</span>
            <span class="order-date">{{ order.createTime }}</span>
          </div>
          <el-tag :type="getStatusType(order.status)">{{ getStatusText(order.status) }}</el-tag>
        </div>

        <div class="order-content">
          <div class="service-info">
            <img :src="order.serviceImage" :alt="order.serviceTitle" class="service-image">
            <div class="service-details">
              <h3>{{ order.serviceTitle }}</h3>
              <p class="service-description">{{ order.serviceDescription }}</p>
              <div class="service-meta">
                <span class="appointment-time">
                  <i class="el-icon-time"></i>
                  {{ order.appointmentTime }}
                </span>
                <span class="location">
                  <i class="el-icon-location"></i>
                  {{ order.location }}
                </span>
              </div>
            </div>
          </div>

          <div class="order-amount">
            <span class="amount-label">订单金额</span>
            <span class="amount-value">¥{{ order.amount }}</span>
          </div>
        </div>

        <div class="order-footer">
          <div class="order-actions">
            <template v-if="order.status === 'unpaid'">
              <el-button type="primary" @click="handlePay(order)">立即支付</el-button>
              <el-button @click="handleCancel(order)">取消订单</el-button>
            </template>
            <template v-if="order.status === 'pending'">
              <el-button type="primary" @click="handleReschedule(order)">改期</el-button>
              <el-button @click="handleCancel(order)">取消订单</el-button>
            </template>
            <template v-if="order.status === 'completed'">
              <el-button type="primary" @click="handleReview(order)">评价服务</el-button>
              <el-button @click="handleReOrder(order)">再次预约</el-button>
            </template>
            <template v-if="order.status === 'cancelled'">
              <el-button @click="handleDelete(order)">删除订单</el-button>
            </template>
          </div>
          <el-button type="text" @click="viewOrderDetail(order)">查看详情</el-button>
        </div>
      </el-card>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="totalOrders"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'OrdersPage',
  data() {
  return {
    activeTab: 'all',
    currentPage: 1,
    pageSize: 10,
    orders: [
      {
        id: 1,
        orderNumber: 'P202401150001',
        createTime: '2024-01-15 14:30:00',
        status: 'unpaid',
        serviceTitle: '专业宠物美容套餐',
        serviceDescription: '包含洗澡、剪毛、指甲修剪等全方位美容服务',
        serviceImage: require('@/assets/order-service-beauty.png'),
        appointmentTime: '2024-01-20 14:00-15:00',
        location: '到店服务',
        amount: 199,
        petType: '狗狗',
        petBreed: '金毛',
        petAge: 2,
        petWeight: 25,
        contactName: '张先生',
        contactPhone: '13800138000',
        address: '北京市朝阳区xxx街道xxx号',
        payTime: null, // 支付时间
        paymentMethod: null // 支付方式
      },
      {
        id: 2,
        orderNumber: 'P202401140001',
        createTime: '2024-01-14 10:20:00',
        status: 'pending',
        serviceTitle: '宠物寄养服务',
        serviceDescription: '24小时专人看护，独立空间，定期运动',
        serviceImage: require('@/assets/order-service-boarding.png'),
        appointmentTime: '2024-01-25 09:00-18:00',
        location: '到店服务',
        amount: 299,
        petType: '猫咪',
        petBreed: '英短',
        petAge: 1,
        petWeight: 4,
        contactName: '李女士',
        contactPhone: '13800138001',
        address: '北京市海淀区xxx街道xxx号',
        payTime: null,
        paymentMethod: null
      },
      {
        id: 3,
        orderNumber: 'P202401100001',
        createTime: '2024-01-10 16:45:00',
        status: 'completed',
        serviceTitle: '宠物训练课程',
        serviceDescription: '专业训练师一对一指导，培养基本服从性',
        serviceImage: require('@/assets/order-service-training.png'),
        appointmentTime: '2024-01-15 15:00-16:00',
        location: '到店服务',
        amount: 599,
        petType: '狗狗',
        petBreed: '拉布拉多',
        petAge: 3,
        petWeight: 30,
        contactName: '王先生',
        contactPhone: '13800138002',
        address: '北京市朝阳区xxx街道xxx号',
        payTime: '2024-01-10 17:00:00',
        paymentMethod: '支付宝'
      }
    ]
  };
},
  computed: {
    filteredOrders() {
      if (this.activeTab === 'all') {
        return this.orders
      }
      return this.orders.filter(order => order.status === this.activeTab)
    },
    totalOrders() {
      return this.filteredOrders.length
    }
  },
  methods: {
    getStatusType(status) {
      const types = {
        unpaid: 'warning',
        pending: 'primary',
        completed: 'success',
        cancelled: 'info'
      }
      return types[status] || 'info'
    },
    getStatusText(status) {
      const texts = {
        unpaid: '待支付',
        pending: '待服务',
        completed: '已完成',
        cancelled: '已取消'
      }
      return texts[status] || status
    },
    handleTabClick() {
      this.currentPage = 1
    },
    handlePageChange(page) {
      this.currentPage = page
    },
    handlePay(order) {
      this.$router.push(`/payment/${order.id}`)
    },
    async handleCancel(order) {
      try {
        await this.$confirm('确定要取消该订单吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        // 调用取消订单API
        // await this.$http.post(`/api/orders/${order.id}/cancel`)
        this.$message.success('订单已取消')
        // 刷新订单列表
        this.getOrders()
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('取消订单失败')
        }
      }
    },
    handleReschedule(order) {
      this.$router.push(`/appointment/${order.id}/reschedule`)
    },
    handleReview(order) {
      this.$router.push(`/review/${order.id}`)
    },
    handleReOrder(order) {
      this.$router.push({
        name: 'Appointment',
        params: {
          id: order.id
        },
        state: {
          serviceInfo: {
            title: order.serviceTitle,
            description: order.serviceDescription,
            amount: order.amount
          }
        }
      })
    },
    handleDelete(order) {
      this.$confirm('确定要删除该订单吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          // 调用删除订单API
          // await this.$http.delete(`/api/orders/${order.id}`)
          // 从本地数据中移除订单
          this.orders = this.orders.filter(item => item.id !== order.id)
          this.$message.success('订单已删除')
        } catch (error) {
          this.$message.error('删除订单失败')
        }
      }).catch(() => {})
    },
    viewOrderDetail(order) {
    // 跳转到订单详情页，并传递订单数据
    this.$router.push({
      path: `/orders/${order.id}`,
      query: {
        orderData: JSON.stringify(order) // 将订单数据序列化为字符串
      }
    });
  },
    async getOrders() {
      try {
        // 调用获取订单列表API
        // const response = await this.$http.get('/api/orders')
        // this.orders = response.data
      } catch (error) {
        this.$message.error('获取订单列表失败')
      }
    }
  }
}
</script>

<style scoped>
.orders-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.orders-header {
  margin-bottom: 30px;
}

.orders-header h2 {
  font-size: 28px;
  color: #333;
  margin-bottom: 20px;
}

.order-tabs {
  margin-bottom: 20px;
}

.orders-list {
  display: grid;
  gap: 20px;
}

.order-card {
  margin-bottom: 20px;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.order-info {
  display: flex;
  gap: 20px;
}

.order-number {
  color: #666;
}

.order-date {
  color: #999;
}

.order-content {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.service-info {
  display: flex;
  gap: 20px;
}

.service-image {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
}

.service-details {
  flex: 1;
}

.service-details h3 {
  margin: 0 0 10px;
  font-size: 18px;
  color: #333;
}

.service-description {
  color: #666;
  margin-bottom: 10px;
}

.service-meta {
  display: flex;
  gap: 20px;
  color: #999;
}

.service-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.order-amount {
  text-align: right;
}

.amount-label {
  display: block;
  color: #666;
  margin-bottom: 5px;
}

.amount-value {
  font-size: 20px;
  color: #f56c6c;
  font-weight: bold;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.order-actions {
  display: flex;
  gap: 10px;
}

.pagination {
  margin-top: 30px;
  text-align: center;
}
</style>